<template>
  <div @touchmove="touchmove" ref="boxHeight">
    <BomNav :active="active"></BomNav>
    <van-search v-model="value" show-action label="" placeholder="请输入搜索关键词" @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="fenleiss">
      <div>
        <div v-for="item in store.state.alllisttype" :key="item.id"
          :class="index == item.goodsCategoryName ? 'activess' : ''" @click="changeType(item.goodsCategoryName)">
          {{ item.goodsCategoryName }}

        </div>
      </div>
      <div ref="boxs">
        <div v-for="item in typeData.data" :key="item.id" :class="item.goodsCategoryName == index ? 'shoppingShow' : ''">
          <div>
            <div>
              <img @click="seleteListData(item)" :src="item.url" alt="">
            </div>
            <div>
              {{ item.title }}
            </div>
          </div>
        </div>
        <div>
        </div>
      </div>
    </div>

    <div class="tianchong"></div>
  </div>
</template>


<script lang="ts" setup>
import BomNav from "@/components/BomNav.vue";
import { showToast } from "vant";
import { ref, watch, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { liketypenames, listData } from '@/api/index'
let router = useRouter()
let active = ref(1)
let store = useStore()
const value = ref('');
const onSearch = () => {
  liketypenames(value.value, value.value, 0, 20).then((result) => {

    if (result.data.msg == '没有该数据') {
      showToast('没有相关数据哦')
    } else {
      store.commit('updateSearchdata', result.data.data)
      router.push({
        path: '/search'
      })
    }
  }).catch((err) => {
    console.log(err);
  });
};

let index = ref('oppo')
let typeData = reactive({
  data: [] as any
})
let page = reactive({
  page: 0,
  pagesize: 20
})
let boxHeight: any = ref(null)
let nums = 0
let touchmove = (e: any) => {
  console.log(e.touches[0].pageY> boxHeight.value.clientHeight - 500);
  if (e.touches[0].pageY > boxHeight.value.clientHeight - 500) {
    nums++
  }
  if (nums == 1) {
    showToast({
      message: '正在加载中。。。。。。',
      position: 'bottom',
    });
   
    console.log(index.value, page.page, page.pagesize);

    listData(index.value, page.page, page.pagesize).then((result) => {

      page.page++,
        result.data.data.forEach((data: any) => {
          typeData.data.push(data)
        })
      setTimeout(() => {
        nums = 0
        page.page++
      }, 1000);
    }).catch((err: any) => {
      showToast('网络出了点问题')
    });
  }
}

let seleteListData = (id: number) => {
  store.commit('updataxiangqingdata', id)
  router.push({
    path: `/xiangqing`,
    params: {
      id: id
    }
  })

}

//初始化页面数据
listData(index.value, page.page, page.pagesize).then((result) => {
  page.page = 0,
    typeData.data = result.data.data
  page.page++
}).catch((err) => {
});
let changeType = (val: string) => {
  nums=0
  typeData.data = []
  page.page = 0,
    index.value = val;
  listData(val, page.page, page.pagesize).then((result) => {

    typeData.data = result.data.data
    page.page++
  }).catch((err) => {
  });
}

</script>
<style lang="less" scoped>
.fenleiss {
  display: flex;
  flex-wrap: nowrap;

  >div:nth-child(1) {
    width: 110rem;
    font-size: 14rem;
    position: fixed;
    top: 55rem;
    left: 0;

    >div {
      height: 50rem;

      line-height: 50rem;
      background-color: #F2F2F2;
      overflow: hidden;
      color: #333333;

    }

  }

  >div:nth-child(2) {
    margin-left: 120rem;
    margin-top: 55rem;
    width: 255rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;

    >div {
      display: none;
    }

    .shoppingShow {
      overflow: hidden;
      width: 110rem;
      display: block;
      background-color: #ffffff;
      margin-top: 20rem;
      border: 15rem;
      text-align: center;

      >div {
        text-align: left;

        img {
          width: 110rem;
        }

        >div:nth-child(2) {
          text-align: center;
          width: 110rem;
          font-size: 12rem;
        }
      }
    }
  }
}

.van-search {
  position: fixed;
  top: 0;
  width: 375rem;
  z-index: 999;
}

.activess {
  background-color: #ffffff !important;
}

.tianchong {
  height: 50rem !important;
}

.van-tree-select_nav {
  width: 50rem !important;

}

.van-sibebar {
  width: 50rem !important;
}

.van-tree-select_nav {
  width: 50rem !important;
}

.van-sidebar-item {
  background-color: none !important;

}
</style>
  